import './YPColorA02.scss'

import { v4 } from 'uuid'
import { useState } from 'react'
import { useMount, useRequest } from 'ahooks'
import { MinusCircleOutlined } from '@ant-design/icons'
import { Input, Button, Popconfirm, notification, Select, ColorPicker } from 'antd'
import { Http } from '../../../Api'
import { ChartsLegendPosition } from '../../../Configure/CommonParameter'
const { TextArea } = Input

export const YPColorA02 = () => {
    const [api, contextHolder] = notification.useNotification()
    const json = [{ uuid: v4(), color: 'rgb(255,255,255)', direction: 'top', positions: '', text: '' }]
    const [Data, setData] = useState()
    const [Options, setOptions] = useState()
    const { runAsync: getData } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            if (res) {
                setData(res)
            } else {
                const data = JSON.stringify(JSON.stringify(json))
                setData(json)
                posData({ url: 'posSaveJsonInfoByUuid', data, path: ['YPColorA02'] })
            }
        },
    })

    const { runAsync: getSelect } = useRequest(Http, {
        manual: true,
        onSuccess: res => setOptions(res.elements[0].elementDetails),
    })

    const { runAsync: posData } = useRequest(Http, {
        manual: true,
        onSuccess: () => {
            api.success({ key: 'success', message: '数据保存成功!' })
            getData({ url: 'getJsonInfoByUuid', data: { uuid: 'YPColorA02' } })
        },
    })

    useMount(() => {
        getData({ url: 'getJsonInfoByUuid', data: { uuid: 'YPColorA02' } })
        getSelect({ url: 'getScenesDetailsUuid', path: ['20bbde87-edc8-40fc-bd89-a0cfe61e0208'] })
    })

    const onAdded = () => {
        setData([...Data, ...json])
    }

    const onDelete = uuid => {
        const delArr = Data.filter(item => item.uuid !== uuid)
        setData(delArr)
    }

    const onSubmit = () => {
        const data = JSON.stringify(JSON.stringify(Data))
        posData({ url: 'posSaveJsonInfoByUuid', data, path: ['YPColorA02'] })
    }

    const filterOption = (input, option) => (option?.tableName ?? '').toLowerCase().includes(input.toLowerCase())

    return (
        <div className="YPColorA02">
            {contextHolder}
            {Data &&
                Data.map(({ uuid, positions, text, color, direction }, index) => {
                    const data = Data.find(v => v.uuid === uuid)
                    return (
                        <div key={uuid}>
                            <div className="LabelA01">
                                <div className="Label">
                                    <div>标识颜色 : </div>
                                    <ColorPicker
                                        showText
                                        className="ColorSelect"
                                        defaultValue={color}
                                        onChangeComplete={e => {
                                            data.color = e.toRgbString()
                                            setData([...Data])
                                        }}
                                    />
                                </div>
                                <div className="Label">
                                    <div>框体方向 : </div>
                                    <Select
                                        showSearch
                                        defaultValue={direction}
                                        options={ChartsLegendPosition}
                                        filterOption={filterOption}
                                        onChange={e => {
                                            data.direction = e
                                            setData([...Data])
                                        }}
                                    />
                                </div>
                                <div>
                                    <Popconfirm
                                        title="是否删除该行数据?"
                                        description="删除后数据不能恢复,请谨慎选择!"
                                        okText="删除"
                                        cancelText="取消"
                                        onConfirm={() => onDelete(uuid)}
                                    >
                                        <MinusCircleOutlined />
                                    </Popconfirm>
                                </div>
                            </div>
                            <div className="Label">
                                <div>位置信息 : </div>
                                <TextArea
                                    rows={4}
                                    defaultValue={positions}
                                    onChange={e => {
                                        data.positions = e.target.value
                                        setData([...Data])
                                    }}
                                />
                            </div>
                            <div className="Label">
                                <div>标记内容 : </div>
                                <TextArea
                                    rows={4}
                                    defaultValue={text}
                                    onChange={e => {
                                        data.text = e.target.value
                                        setData([...Data])
                                    }}
                                />
                            </div>
                        </div>
                    )
                })}
            <div className="Button">
                <Button block type="dashed" size="large" onClick={onAdded}>
                    添加一行数据
                </Button>
                <Button block type="primary" size="large" onClick={onSubmit}>
                    保存数据
                </Button>
            </div>
        </div>
    )
}
